/**
 * useDebugValue
 *
 *    作用：为 自定义hook 在 Devtools 中显示格式化标签。
 *    语法：
 *        useDebugValue(value, format?)
 *      1. value - 要显示的值
 *      2. format - 一个对 value 做格式化的函数
 *    自定义hook：
 *      一个以 use 开头的，内部使用其他 自定义hook 或内置hook的一个函数
 */

import { Space, Button } from "antd";
import { useEffect, useState, useDebugValue } from "react";

function useCounter() {
  const [count, setCount] = useState(1);

  useDebugValue(count, (value) => "当前值：" + value);

  function increment() {
    setCount(count + 1);
  }

  function decrement() {
    setCount(count - 1);
  }

  return {
    count,
    increment,
    decrement,
  };
}

function useTitle(value: string) {
  useEffect(() => {
    document.title = value;
  }, [value]);
}

export default function App() {
  const { count, increment, decrement } = useCounter();
  useTitle("" + count);

  return (
    <div>
      <h1>useDebugValue</h1>

      <p>{count}</p>

      <Space>
        <Button onClick={() => increment()}>INCREMENT</Button>
        <Button onClick={() => decrement()}>DECREMENT</Button>
      </Space>
    </div>
  );
}
